﻿@{
	Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

@section header{
	<style>
		/*.fast-filter .tablink {
			padding-right: 8px;
			padding-left: 2px;
		}*/
	</style>
}

<div class="detail-panel-div" style="">
	@*页面视图列表开始*@
	@*<table class="list_table table100 fast-filter" style="line-height:25px;">
			<tbody>
				<tr>
					<td style="">
						<i class="icon-filter pure-icon-bu"></i><span>
							显示：<a class="cus_markbai tablink" href="javascript:void(0);" @@click="searchReset">全部</a>
						</span>
						<i class="icon-filter pure-icon-bu"></i><span>
								状态：<a class="cus_markbai tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="reset" data-fname="donestate">不限</a>
								<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-fname="donestate" data-fvalue="@((int)BillState.未结算)">待结算</a>
								<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-fname="donestate" data-fvalue="@((int)BillState.待付款)">已结算</a>
							</span>
							<i class="icon-filter pure-icon-bu"></i>
							<span>
								时间：<a class="cus_markbai tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="reset" data-fstart="studentdate_s" data-fend="studentdate_e">不限</a>
								<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="studentdate_s" data-fend="studentdate_e" data-fvalue="nowd">当天</a>
								<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="studentdate_s" data-fend="studentdate_e" data-fvalue="noww">本周</a>
								<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="studentdate_s" data-fend="studentdate_e" data-fvalue="nowm">本月</a>
								<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="studentdate_s" data-fend="studentdate_e" data-fvalue="nowy">本年</a>
								<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="studentdate_s" data-fend="studentdate_e" data-fvalue="lastw">上周</a>
								<a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="studentdate_s" data-fend="studentdate_e" data-fvalue="lastm">上月</a>
							</span>
		</td>
		</tr>
		</tbody>
		</table>*@
	@*页面视图列表结束*@
	<div id="searchDiv" style="z-index: 1; display: block; position: relative; margin-top: 3px;" v-show="searchShow">
		<table cellpadding="5" cellspacing="2" class="searchUIBasic padding2" align="center" border="0" style="width:90%;border:none;">
			<tbody>
				<tr>
					<td class="small" nowrap="" align="center">
						<span>参数类别</span>
						<select name="" v-model="listConditions.pid">
							<option value="0">不限</option>
							<option :value="c.value" v-for="(c) in categories">{{c.text}}</option>
						</select>
						<span>参数名称</span>
						<input type="text" class="txtBox" style="width: 160px" v-model.trim="listConditions.name">
						<span>参数值</span>
						<input type="text" class="txtBox" style="width: 130px" v-model.trim="listConditions.value">
						&nbsp;
						<button class="pure-button pure-button-edit" title="查找" @@click.prevent="listRefresh(1)">
							<i class="icon-search"></i>查找
						</button>
						&nbsp;
						<button class="pure-button pure-button-cancel" title="取消" @@click.prevent="searchReset">
							<i class="icon-rotate-left"></i>重置
						</button>
						&nbsp;&nbsp;
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<table class="lvt small table100" style="">
		<tr>
			<td style="padding-left: 30px;" align="left" nowrap>
				<button class="pure-button pure-button-edit" @@click.prevent="listAdd">
					<i class="icon-plus"></i>&nbsp;新增
				</button>
				@*&nbsp;
					<button class="pure-button pure-button-danger" @@click.prevent="listBatchDelete">
						<i class="icon-trash"></i>&nbsp;批量删除
					</button>*@
			</td>
			<td nowrap align="right" valign="middle">
				<table border="0" cellspacing="0" cellpadding="0" class="small">
					<tbody>
						<tr>
							<td style="padding-right: 5px">
								<vue-pagination :total="listData.total" :psize="listData.psize" :pnum="listData.pnum" @@change="pageChangeHandler"></vue-pagination>
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</table>
	<div style="width:100%;overflow:auto;">
		<table class="crm-table table100 padding2" cellspacing="1" cellpadding="3" style="table-layout:fixed;">
			<caption v-show="listData.list.length==0">
				暂无数据
			</caption>
			<tr class="windLayerHead">
				<td style="width: 30px;text-align:center;">
					<input type="checkbox" name="selectall" @@click="listToggle($event)" v-model="listData.checked" />
				</td>
				@*<td style="width: 30px;">状态</td>*@
				<td v-for="(col,idx) in listColumns" :style="col.hdStyles">
					<a class='listFormHeaderLinks' @@click="listSort(col.name)" v-if="col.sort">{{col.title}}<i :class="{'icon-caret-up':listSortColumn.order=='asc','icon-caret-down':listSortColumn.order=='desc'}" v-if="col.name==listSortColumn.name"></i></a>
					<span v-else>{{col.title}}</span>
				</td>
				<td nowrap style="width:40px;">
					操作
				</td>
			</tr>
			<tr v-for="(item,idx) in pageList" :rid="item.ID" :class="{'crm-table-plural':idx%2==1}" style="cursor: pointer;">
				<td style="text-align:center;">
					<input type="checkbox" name="rowid" :value='item.ID' :data-idx="idx" @@click="listCheck($event)" :checked="item.CheckedState" />
				</td>
				@*<td style="text-align:center;">
						<div style="border-radius:50%;width:12px;height:12px;margin:0 auto;" :style="item.Style" :title="item.StateNowText"></div>
					</td>*@
				<td v-for="(col,cidx) in listColumns" :style="item.Styles[cidx]">
					<a :href="item.Links[cidx].href" v-if="item.Links[cidx].href">{{item[col.name]}}</a>
					<span v-else-if="col.format" v-html="col.format(item[col.name],item)"></span>
					<span v-else>{{item[col.name]}}</span>
				</td>
				<td nowrap>
					<i class="icon-edit pure-icon-bu crm-bu-style list-action-btn" title='修改' style="" @@click="listEdit(item)"></i>
					<i class="icon-trash pure-icon-bu crm-bu-style list-action-btn" title='删除' style="" @@click="listDelete(item)"></i>
				</td>
			</tr>
		</table>
	</div>

	<div id="enumcodeEditDiv" class="windLayerDiv" style="display: none;">
		<table class="windLayerHeadingULine table100" cellpadding="3" cellspacing="0">
			<tr class="windLayerHeadingTr">
				<td width="80%" style="cursor: move;" class="windLayerHeading" align="left">
					编辑功能信息
				</td>
				<td align="right">
					<input class="windLayerBtclose" type="button" title="关闭" onclick="popClose();">&nbsp;&nbsp;
				</td>
			</tr>
		</table>
		<form id="enumcodeEditFrm">
			<table style="background-color: rgb(234, 234, 234);width:100%;" class="small" border="0" cellpadding="3" cellspacing="1">
				<tr class="detail-content-heading" style="height: 28px;">
					<td colspan="2">
						<b>&nbsp;&nbsp;基本信息</b>
					</td>
				</tr>
				<tr bgcolor="white" height="25px;">
					<td class="windLayerTitle" align="right">
						参数编码
					</td>
					<td class="windLayerInfo" align="left">
						<input type="text" v-model.trim="model.Code" class="detailedViewTextBox" style="width: 90%;" />
					</td>
				</tr>
				<tr bgcolor="white" height="25px;">
					<td class="windLayerTitle" align="right" width="30%">
						<span style="color: #f00;">*</span>参数分类
					</td>
					<td class="windLayerInfo" align="left" width="70%">
						<select name="" v-model="model.PID" class="validate[required]">
							<option value="0">请选择</option>
							<option :value="c.value" v-for="(c) in categories">{{c.text}}</option>
						</select>
					</td>
				</tr>
				<tr bgcolor="white" height="25px;">
					<td class="windLayerTitle" align="right">
						<span style="color: #f00;">*</span>参数名称
					</td>
					<td class="windLayerInfo" align="left">
						<input type="text" v-model.trim="model.Name" class="detailedViewTextBox validate[required]" style="width: 90%;" />
					</td>
				</tr>
				<tr bgcolor="white" height="25px;">
					<td class="windLayerTitle" align="right">
						参数值
					</td>
					<td class="windLayerInfo" align="left">
						<input type="text" v-model.trim="model.Value" class="detailedViewTextBox" style="width: 90%;" />
					</td>
				</tr>
				<tr bgcolor="white" height="25px;">
					<td class="windLayerTitle" align="right">
						参数说明
					</td>
					<td class="windLayerInfo" align="left">
						<input type="text" v-model.trim="model.Comment" class="detailedViewTextBox" style="width: 90%;" />
					</td>
				</tr>
				<tr bgcolor="white" height="25px;">
					<td class="windLayerTitle" align="right">
						排序
					</td>
					<td class="windLayerInfo" align="left">
						<input type="number" v-model="model.Sort" value="" class="detailedViewTextBox" style="width: 90%;" />
					</td>
				</tr>
				<tr bgcolor="white" height="25px;">
					<td class="detail-content-label">
						是否系统保留
					</td>
					<td class="detail-content-info">
						<input type="checkbox" class="" v-model="model.Reserved" />
					</td>
				</tr>
				<tr bgcolor="white" height="40px;">
					<td colspan="2" align="center">
						<button type="button" class="pure-button pure-button-success save" onclick="$('#enumcodeEditFrm').submit();">
							<i class="icon-check"></i>保存
						</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<button type="button" class="pure-button pure-button-cancel" onclick="popClose();return false;">
							<i class="icon-reply"></i>取消
						</button>
						&nbsp;
					</td>
				</tr>
			</table>
		</form>
		<div class="windLayerFoot">
			&nbsp;
		</div>
		<div class="windLayerCorner">
			&nbsp;
		</div>
	</div>
</div>
@*生成列表操作*@
@section footer{
	@*日期必须开始*@
	<script src="~/lib/laydate/laydate.js" asp-append-version="true"></script>
	<script src="~/lib/moment/moment.min.js" asp-append-version="true"></script>
	@*验证开始*@
	<script src="~/lib/validationEngine/jquery.validationEngine.min.js" asp-append-version="true"></script>
	<script src="~/lib/validationEngine/jquery.validationEngine-zh_CN.js" asp-append-version="true"></script>
	<link href="~/lib/validationEngine/validationEngine.jquery.css" rel="stylesheet" asp-append-version="true" />
	@*验证结束*@
	@*日期必须结束*@
	<script type="text/javascript">
		@* 列表相关开始 *@
		var listConditionsInit = { pid: "0" };//初始查询条件

		var pageData = $.extend(
			pageBaseData, {
			hideBreadcrumb: false,
			categories:@(Json.Serialize(ViewBag.RootOptions)),
			listData: {
				checked:false,
				list: [],
				total: 0,
				pnum: 1,
				psize: 20,
				sumcol: [],
				listsumtotal: [],
				pagesumtotal: []
			},
			listColumns: [
				{
					title: "参数分类",
					name: "PName",
					hdStyles: {
						width: "120px",
					},
					bdStyles: {
					}
				},
				{
					title: "参数名称",
					name: "Name",
					hdStyles: {
						width: "180px",
					},
					bdStyles: {
					}
				},
				{
					title: "参数编码",
					name: "Code",
					hdStyles: {
						width: "120px",
					},
					bdStyles: {
					}
				},
				{
					title: "参数值",
					name: "Value",
					hdStyles: {
						width: "120px",
					},
					bdStyles: {
					}
				},
				{
					title: "参数说明",
					name: "Comment",
					hdStyles: {
						width: "220px",
					},
					bdStyles: {
					}
				},
				{
					title: "排序",
					name: "Sort",
					hdStyles: {
						width: "80px",
						textAlign:'center',
					},
					bdStyles: {
						textAlign:'center',
					}
				},
				{
					title: "是否系统预留",
					name: "Reserved",
					hdStyles: {
						width: "80px",
						textAlign:'center',
					},
					bdStyles: {
						textAlign:'center',
					}, format: function (val, item) {
						if (val) {
							return "<i class='icon-check'></i>";
						} else {
							return "";
						}
					}
				},
				{
					title: "创建日期",
					name: "AddDate",
					hdStyles: {
						width: "120px",
						textAlign:'center',
					},
					bdStyles: {
						textAlign:'center',
					}
				},
				{
					title: "创建人",
					name: "AddManName",
					hdStyles: {
						width: "60px",
						textAlign:'center',
					},
					bdStyles: {
						textAlign:'center',
					}
				},
			],
			searchShow:true,
			listConditions: Object.assign({}, listConditionsInit),
			listSortColumn: {
				name: "",
				order:""
			},
			listStyles: {
				@*"StateNow": {
					"@((int)ST.Buz.Base.Enums.BillState.已付款)": { backgroundColor:"#FFCC00"},
					"@((int)ST.Buz.Base.Enums.BillState.已作废)": { backgroundColor:"#FF0000"},
					"@((int)ST.Buz.Base.Enums.BillState.已删除)": { backgroundColor:"#cc4646"},
					"@((int)ST.Buz.Base.Enums.BillState.已退款)": { backgroundColor:"#E2AF08"},
					"@((int)ST.Buz.Base.Enums.BillState.待付款)": { backgroundColor:"#009963"},
					"@((int)ST.Buz.Base.Enums.BillState.未结算)": { },
				}*@
			},
			listColStyles: {
			},
			model: {},
		});

		var pageApp = new Vue({
			el: '#app',
			data: pageData,
			mounted: function () {
				this.listRefresh();
			},
			methods: {
				pageBack: function () {
					//history.go(-1);
					history.back();
				},
				viewMenu: function (menu) {
					if (menu.Code == this.curmenu) {
						return;
					}
					location.href = menu.Url;
				},
				pageChangeHandler: function (args) {
					this.listRefresh(args.pnum, args.psize)
				},
				listFastFilter: function (e) {
				},
				listRefresh: function (pageNum, pageSize) {
					var _params = Object.assign({}, {
						pnum: pageNum || this.listData.pnum,
						psize: pageSize || this.listData.psize,
						sortorder: !this.listSortColumn.name ? "" : this.listSortColumn.name + "_" + this.listSortColumn.order
					}, this.listConditions);
					var _this = this;
					utils.ajaxPost('@(Url.Action("Search", "Sys_EnumCode"))', _params, function (resp) {
						var list = resp.data.list.map(function (item) {
							return Object.assign({}, item, {
								CheckedState: false,
							});
						});
						var newData = { list: list, total: resp.data.total, pnum: resp.data.pnum, psize: resp.data.psize ,checked:false};
						_this.listData = newData;
					}, function (err) {
					})
				},
				searchReset: function () {
					this.listConditions = Object.assign({}, listConditionsInit);
					this.listSortColumn = {
						col: "",
						order: ""
					};
					this.listRefresh(1);
				},
				searchToggle: function () {
					this.searchShow = !this.searchShow;
				},
				listSort: function (col) {
					if (col != this.listSortColumn.name) {
						this.listSortColumn.order = "desc";
						this.listSortColumn.name = col;
					} else {
						this.listSortColumn.order = this.listSortColumn.order == "asc" ? "desc" : "asc";
					}
					this.listRefresh(1);
				},
				listToggle: function (e) {
					var checked = (e.srcElement || e.target).checked;
					this.listData.list=this.listData.list.map(function (item) {
						return Object.assign({}, item,{
							CheckedState: checked
						});
					});
				},
				listCheck: function (e) {
					var obj = e.srcElement || e.target;
					var checked = obj.checked;
					this.listData.list.splice(obj.dataset.idx, 1, Object.assign({}, this.listData.list[obj.dataset.idx], {
						CheckedState: checked
					}));
				},
				listAdd: function () {
					$('#enumcodeEditDiv').find('.windLayerHeading').html('新增参数信息');
					this.model = {
						PID: 0,
						PName:"",
						Sort: 0,
						Code:"",
						Reserved: false,
					};
					popOpen('#enumcodeEditDiv','520px');
				},
				listEdit: function (item) {
					if (!item) {
						return;
					}
					var self = this;
					utils.ajaxPost('@(Url.Action("ViewJson", "Sys_EnumCode"))', { id: item.ID }, function (resp) {
						self.model = resp.data;
						$('#enumcodeEditDiv').find('.windLayerHeading').html('修改参数信息');
						popOpen('#enumcodeEditDiv','520px');
					}, function (msg) {
						utils.alert(msg);
					});
				},
				listDelete: function (item) {
					var _this = this;
					utils.confirm('确定要删除参数【' + item.Name +'】？', function () {
						utils.ajaxPost('@(Url.Action("Delete","Sys_EnumCode"))', { id: item.ID }, function (resp) {
							utils.success("删除成功");
							_this.listRefresh();
						}, function (msg) {
							utils.alert(msg);
						});
					});
				},
				listBatchDelete: function () {
					var selected = this.listData.list.filter(function (item) {
						return item.CheckedState;
					});
					var ids = selected.map(function (item) {
						return item.ID;
					});
					if (!ids||ids.length == 0) {
						utils.alert('请先选择要删除的参数');
						return;
					}
					var _this = this;
					utils.confirm('确定要删除所选择的参数？', function () {
						utils.ajaxPost('@(Url.Action("BatchDelete", "Sys_EnumCode"))',  ids , function (resp) {
							utils.success("删除成功");
							_this.listRefresh();
						}, function (msg) {
							utils.alert(msg);
						});
					});
				},
				listSave: function () {
					var _this = this;
					utils.ajaxPost('@(Url.Action("Save", "Sys_EnumCode"))', _this.model, function (resp) {
						popClose();
						_this.listRefresh();
					}, function (msg) {
						utils.alert(msg);
					});
				}
			},
			computed: {
				pageList: function () {
					var _this = this;
					return this.listData.list.map(function (item) {
						return Object.assign({}, item, {
							Styles: _this.listColumns.map(function (col) {//列样式
								return Object.assign({}, col.bdStyles, _this.listColStyles[col.name] ? _this.listColStyles[col.name][item[col.name]] : {})
							}),
							Style: {},
							//Style: _this.listStyles.StateNow[item.StateNow],//行样式
							Links: _this.listColumns.map(function (col) {
								return Object.assign({}, { href: col.href ? col.href.replace(/{ID}/g, item.ID) : "" });
							}),
						});
					});
				},
				currentM: function () {
					var currentM = null;
					var i;
					var j;
					for (i = 0; i < this.global.modules.length; i++) {
						for (j = 0; j < this.global.modules[i].Services.length; j++) {
							if (this.serviceCode == this.global.modules[i].Services[j].Code) {
								currentM = this.global.modules[i];
								break;
							}
						}
					}
					return currentM;
				},
				currentS: function () {
					var currentS = null;
					var i;
					var j;
					for (i = 0; i < this.global.modules.length; i++) {
						for (j = 0; j < this.global.modules[i].Services.length; j++) {
							if (this.serviceCode == this.global.modules[i].Services[j].Code) {
								currentS = this.global.modules[i].Services[j];
								break;
							}
						}
					}
					return currentS;
				}
			},
			filters: {
			}
		});
		@* 列表相关结束 *@
		var popLayerIndex;
		function popOpen(id,width) {
			popLayerIndex=layer.open({
				type: 1,
				title: false,
				closeBtn: 0,
				area: width||'520px',
				skin: 'layui-layer-nobg', //没有背景色
				shadeClose: false,
				content: $(id)
			});
		}

		function popClose() {
			layer.close(popLayerIndex|| layer.index);
		}

		function openParent(type) {
			if (type == 's') {
				utils.layerPop('@(Url.Action("PopList","Sys_EnumCode"))?callback=popParentCallbacks', '400px', '450px', '#txtPID');
			} else {
				utils.layerPop('@(Url.Action("PopList","Sys_EnumCode"))?callback=popParentCallbackp', '400px', '450px','#PName' );
			}
		}

		function popParentCallbacks(ret) {
			pageApp.listConditions = $.extend({}, pageApp.listConditions, {
				pid : ret.id,
				pname : ret.name,
			});
		}

		function popParentCallbackp(ret) {
			pageApp.model = $.extend({}, pageApp.model, {
				PID : ret.id,
				PName : ret.name,
				Code : ret.code
			});
			@*utils.ajaxPost('@(Url.Action("GenCode", "Sys_Organization"))', { areacode: modelData.AreaCode }, function (resp) {
				modelData.Code = resp.data;
			});*@
		}

		function clearParent() {
			pageApp.model = $.extend({}, pageApp.model, {
				PID : '0',
				PName : "",
				Code : ""
			});
		}

		$(document).ready(function () {
			$("#enumcodeEditFrm").validationEngine({
				scroll: false,
				validateNonVisibleFields: false,
				autoHidePrompt: true,
				promptPosition:'topLeft',
				showOneMessage: true,
				ajaxFormValidationMethod: 'post',
				onValidationComplete: function (form, status) {
					if (!status) {
						return;
					}
					pageApp.listSave();
				}
			});
		});
	</script>
}
